<template>
    <svg
    class="svg-icon"
    :style="{
      width: size||'1em',
      height: size||'1em',
      fill: color
    }"
    aria-hidden="true"
  >
    <use
      :xlink:href="symbolId"
      rel="external nofollow"
    />
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue';
interface Props {
	name: string;
	size: string;
  color?: string;
}

const props = withDefaults(defineProps<Props>(),{
	size: '1em'
})
const symbolId = computed(() => {
    return `#icon-${props.name}`
})

</script>


<style lang="less">
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>